<template>
  <div class="user-container">
    <!-- 顶部导航 -->
    <van-nav-bar class="page-nav-bar" title="个人中心">
      <van-icon slot="left" class="left-icon" @click="$router.go(-1)" name="arrow-left" />
    </van-nav-bar>
    <van-cell title="头像" is-link value="内容">
      <van-image round class="avatar" :src="userInfo.photo" />
    </van-cell>
    <van-cell @click="isShowName=true" title="昵称" is-link :value="userInfo.name" />
    <van-cell title="性别" is-link :value="userInfo.gender? '女':'男'" />
    <van-cell title="生日" is-link :value="userInfo.birthday" />

    <!-- 编辑昵称弹层 -->
    <van-popup v-model="isShowName" position="bottom" :style="{ height: '80%' }">

      <EditName @clickEditName="isShowName=false" />
    </van-popup>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user/index.js'
import EditName from './components/editName.vue'
export default {
  name: 'userInfo',
  data () {
    return {
      userInfo: {},
      isShowName: false // 昵称弹窗
    }
  },
  methods: {
    async loadUserProfile () {
      try {
        const { data: res } = await getUserInfo()
        console.log(res)
        this.userInfo = res.data
        this.$toast('获取成功')
      } catch (err) {
        this.$toast('获取失败')
      }
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {
    EditName
  },
  created () {
    this.loadUserProfile()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.user-container {
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
